<template>
  <div>
    <el-tabs :tab-position="tabPosition" class="role-view">
      <el-tab-pane label="超级管理员">
        <div class="titbox">
          <div></div>
          <div style="margin-right:10px">
            <el-button type="primary" disabled>邀请成员</el-button>
            <el-button type="primary" disabled>编辑角色</el-button>
            <el-button type="danger" disabled>删除角色</el-button>
          </div>
        </div>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="avart" label="头像">
            <template slot-scope="scope">
              <img :src="scope.row.avart" style="width:28px;height:28px;border-radius:4px;" alt />
            </template>
          </el-table-column>
          <el-table-column prop="name" label="昵称"></el-table-column>
          <el-table-column prop="sex" label="性别"></el-table-column>
          <el-table-column prop="shop" label="管理门店"></el-table-column>
          <el-table-column prop="status" label="状态"></el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="管理员">
        <div class="titbox">
          <div></div>
          <div style="margin-right:10px">
            <el-button type="primary" @click="invitemembers">邀请成员</el-button>
            <el-button type="primary" @click="editrole">编辑角色</el-button>
            <el-button type="danger">删除角色</el-button>
          </div>
        </div>
        <el-table :data="tableData1" style="width: 100%">
          <el-table-column prop="avart" label="头像">
            <template slot-scope="scope">
              <img :src="scope.row.avart" style="width:28px;height:28px;border-radius:4px;" alt />
            </template>
          </el-table-column>
          <el-table-column prop="name" label="昵称"></el-table-column>
          <el-table-column prop="sex" label="性别"></el-table-column>
          <el-table-column prop="shop" label="管理门店"></el-table-column>
          <el-table-column prop="status" label="状态"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button @click.native.prevent="del(scope.$index, tableData1)" type="text" size="small">删除</el-button>
              <el-button
                @click.native.prevent="changestores(scope.$index, tableData1)"
                type="text"
                size="mini"
              >更换授权门店</el-button>
              <el-button
                @click.native.prevent="transferroles(scope.$index, tableData1)"
                type="text" size="mini"
              >转移成员角色</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="运营人员">
        <div class="titbox">
          <div></div>
          <div style="margin-right:10px">
            <el-button type="primary">邀请成员</el-button>
            <el-button type="primary">编辑角色</el-button>
            <el-button type="danger">删除角色</el-button>
          </div>
        </div>
        <el-table :data="tableData2" style="width: 100%">
          <el-table-column prop="avart" label="头像">
            <template slot-scope="scope">
              <img :src="scope.row.avart" style="width:28px;height:28px;border-radius:4px;" alt />
            </template>
          </el-table-column>
          <el-table-column prop="name" label="昵称"></el-table-column>
          <el-table-column prop="sex" label="性别"></el-table-column>
          <el-table-column prop="shop" label="管理门店"></el-table-column>
          <el-table-column prop="status" label="状态"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button @click.native.prevent="del(scope.$index, tableData2)" type="text" size="mini">删除</el-button>
              <el-button
                @click.native.prevent="changestores(scope.$index, tableData2)"
                type="text" size="mini"
              >更换授权门店</el-button>
              <el-button
                @click.native.prevent="transferroles(scope.$index, tableData2)"
                type="text" size="mini"
              >转移成员角色</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
     <el-dialog
      :title="dialogTitle"
      :visible.sync="editrolepopup"
      width="50%"
    >
      <el-form ref="formInfo" :model="formInfo" class="demo-form-inline" label-width="100px">
        <el-form-item label="角色名称" prop="rolename">
          <el-select v-model="formInfo.rolename" style="width:98%" placeholder="请选择角色名称">
            <el-option label="普通座" value="1"></el-option>
            <el-option label="商务座" value="2"></el-option>
            <el-option label="豪华座" value="3"></el-option>
          </el-select>
        </el-form-item>
        <div class="infoswitch">
            <div class="centerswitch">
                <el-switch v-model="uservalue" active-text="用户" active-color="#409EFF" inactive-color="#DCDFE6"></el-switch>
            </div>
            <div class="swit_user">
                <el-switch class="swit_item" :disabled="!uservalue" v-model="uservalue" active-text="查看列表" active-color="#409EFF" inactive-color="#DCDFE6"></el-switch>
                <el-switch class="swit_item" :disabled="!uservalue" v-model="uservalue" active-text="新建用户" active-color="#409EFF" inactive-color="#DCDFE6"></el-switch>
                <el-switch class="swit_item" :disabled="!uservalue" v-model="uservalue" active-text="编辑用户" active-color="#409EFF" inactive-color="#DCDFE6"></el-switch>
                <el-switch class="swit_item" :disabled="!uservalue" v-model="uservalue" active-text="锁定用户" active-color="#409EFF" inactive-color="#DCDFE6"></el-switch>
                <el-switch class="swit_item" :disabled="!uservalue" v-model="uservalue" active-text="删除用户" active-color="#409EFF" inactive-color="#DCDFE6"></el-switch>
            </div>
            <div class="swit_users">
                <el-switch :disabled="!uservalue" v-model="uservalue" active-text="查看详情" active-color="#409EFF" inactive-color="#DCDFE6"></el-switch>
            </div>
            <div class="swit_usersd">
                <el-switch class="swit_item" :disabled="!uservalue" v-model="uservalue" active-text="查看套餐列表" active-color="#409EFF" inactive-color="#DCDFE6"></el-switch>
                <el-switch class="swit_item" :disabled="!uservalue" v-model="uservalue" active-text="查看充值记录" active-color="#409EFF" inactive-color="#DCDFE6"></el-switch>
                <el-switch class="swit_item" :disabled="!uservalue" v-model="uservalue" active-text="查看预约记录" active-color="#409EFF" inactive-color="#DCDFE6"></el-switch>
                <el-switch class="swit_item" :disabled="!uservalue" v-model="uservalue" active-text="查看消费记录" active-color="#409EFF" inactive-color="#DCDFE6"></el-switch>
                <el-switch class="swit_item" :disabled="!uservalue" v-model="uservalue" active-text="添加/编辑套餐" active-color="#409EFF" inactive-color="#DCDFE6"></el-switch>
                <el-switch class="swit_item" :disabled="!uservalue" v-model="uservalue" active-text="添加/编辑充值" active-color="#409EFF" inactive-color="#DCDFE6"></el-switch>
                <el-switch class="swit_item" :disabled="!uservalue" v-model="uservalue" active-text="添加/编辑预约" active-color="#409EFF" inactive-color="#DCDFE6"></el-switch>
            </div>
            <div class="swit_users">
                <el-switch v-model="uservalue" :disabled="!uservalue" active-text="设置用户管理员/测试" active-color="#409EFF" inactive-color="#DCDFE6"></el-switch>
            </div>
        </div>
        <div class="infoswitch">
            <div class="centerswitch">
                <el-switch v-model="uservalue" active-text="门店" active-color="#409EFF" inactive-color="#DCDFE6"></el-switch>
            </div>
            <div class="swit_user">
                <el-switch class="swit_item" :disabled="!uservalue" v-model="uservalue" active-text="门店列表" active-color="#409EFF" inactive-color="#DCDFE6"></el-switch>
                <el-switch class="swit_item" :disabled="!uservalue" v-model="uservalue" active-text="新增门店" active-color="#409EFF" inactive-color="#DCDFE6"></el-switch>
                <el-switch class="swit_item" :disabled="!uservalue" v-model="uservalue" active-text="删除门店" active-color="#409EFF" inactive-color="#DCDFE6"></el-switch>
                <el-switch class="swit_item" :disabled="!uservalue" v-model="uservalue" active-text="上下线门店" active-color="#409EFF" inactive-color="#DCDFE6"></el-switch>
            </div>
            <div class="swit_users">
                <el-switch :disabled="!uservalue" v-model="uservalue" active-text="查看门店" active-color="#409EFF" inactive-color="#DCDFE6"></el-switch>
            </div>
            <div class="swit_usersd">
                <el-switch class="swit_item" :disabled="!uservalue" v-model="uservalue" active-text="修改基本信息" active-color="#409EFF" inactive-color="#DCDFE6"></el-switch>
                <el-switch class="swit_item" :disabled="!uservalue" v-model="uservalue" active-text="修改高级设置" active-color="#409EFF" inactive-color="#DCDFE6"></el-switch>
                <el-switch class="swit_item" :disabled="!uservalue" v-model="uservalue" active-text="座位管理" active-color="#409EFF" inactive-color="#DCDFE6"></el-switch>
                <el-switch class="swit_item" :disabled="!uservalue" v-model="uservalue" active-text="房间管理" active-color="#409EFF" inactive-color="#DCDFE6"></el-switch>
                <el-switch class="swit_item" :disabled="!uservalue" v-model="uservalue" active-text="货柜管理" active-color="#409EFF" inactive-color="#DCDFE6"></el-switch>
                <el-switch class="swit_item" :disabled="!uservalue" v-model="uservalue" active-text="门禁管理" active-color="#409EFF" inactive-color="#DCDFE6"></el-switch>
            </div>
        </div>
        <div class="infoswitch">
            <div class="centerswitch">
                <el-switch v-model="uservalue" active-text="用户" active-color="#409EFF" inactive-color="#DCDFE6"></el-switch>
            </div>
            <div class="swit_user">
                <el-switch class="swit_item" :disabled="!uservalue" v-model="uservalue" active-text="查看列表" active-color="#409EFF" inactive-color="#DCDFE6"></el-switch>
                <el-switch class="swit_item" :disabled="!uservalue" v-model="uservalue" active-text="新建用户" active-color="#409EFF" inactive-color="#DCDFE6"></el-switch>
                <el-switch class="swit_item" :disabled="!uservalue" v-model="uservalue" active-text="编辑用户" active-color="#409EFF" inactive-color="#DCDFE6"></el-switch>
                <el-switch class="swit_item" :disabled="!uservalue" v-model="uservalue" active-text="锁定用户" active-color="#409EFF" inactive-color="#DCDFE6"></el-switch>
                <el-switch class="swit_item" :disabled="!uservalue" v-model="uservalue" active-text="删除用户" active-color="#409EFF" inactive-color="#DCDFE6"></el-switch>
            </div>
            <div class="swit_users">
                <el-switch :disabled="!uservalue" v-model="uservalue" active-text="查看详情" active-color="#409EFF" inactive-color="#DCDFE6"></el-switch>
            </div>
            <div class="swit_usersd">
                <el-switch class="swit_item" :disabled="!uservalue" v-model="uservalue" active-text="查看列表" active-color="#409EFF" inactive-color="#DCDFE6"></el-switch>
                <el-switch class="swit_item" :disabled="!uservalue" v-model="uservalue" active-text="新建用户" active-color="#409EFF" inactive-color="#DCDFE6"></el-switch>
                <el-switch class="swit_item" :disabled="!uservalue" v-model="uservalue" active-text="编辑用户" active-color="#409EFF" inactive-color="#DCDFE6"></el-switch>
                <el-switch class="swit_item" :disabled="!uservalue" v-model="uservalue" active-text="锁定用户" active-color="#409EFF" inactive-color="#DCDFE6"></el-switch>
                <el-switch class="swit_item" :disabled="!uservalue" v-model="uservalue" active-text="删除用户" active-color="#409EFF" inactive-color="#DCDFE6"></el-switch>
            </div>
            <div class="swit_users">
                <el-switch :disabled="!uservalue" v-model="uservalue" active-text="设置用户管理员/测试" active-color="#409EFF" inactive-color="#DCDFE6"></el-switch>
            </div>
        </div>
        <div class="infoswitch">
            <div class="centerswitch">
                <el-switch v-model="uservalue" active-text="用户" active-color="#409EFF" inactive-color="#DCDFE6"></el-switch>
            </div>
            <div class="swit_user">
                <el-switch class="swit_item" :disabled="!uservalue" v-model="uservalue" active-text="查看列表" active-color="#409EFF" inactive-color="#DCDFE6"></el-switch>
                <el-switch class="swit_item" :disabled="!uservalue" v-model="uservalue" active-text="新建用户" active-color="#409EFF" inactive-color="#DCDFE6"></el-switch>
                <el-switch class="swit_item" :disabled="!uservalue" v-model="uservalue" active-text="编辑用户" active-color="#409EFF" inactive-color="#DCDFE6"></el-switch>
                <el-switch class="swit_item" :disabled="!uservalue" v-model="uservalue" active-text="锁定用户" active-color="#409EFF" inactive-color="#DCDFE6"></el-switch>
                <el-switch class="swit_item" :disabled="!uservalue" v-model="uservalue" active-text="删除用户" active-color="#409EFF" inactive-color="#DCDFE6"></el-switch>
            </div>
            <div class="swit_users">
                <el-switch :disabled="!uservalue" v-model="uservalue" active-text="查看详情" active-color="#409EFF" inactive-color="#DCDFE6"></el-switch>
            </div>
            <div class="swit_usersd">
                <el-switch class="swit_item" :disabled="!uservalue" v-model="uservalue" active-text="查看列表" active-color="#409EFF" inactive-color="#DCDFE6"></el-switch>
                <el-switch class="swit_item" :disabled="!uservalue" v-model="uservalue" active-text="新建用户" active-color="#409EFF" inactive-color="#DCDFE6"></el-switch>
                <el-switch class="swit_item" :disabled="!uservalue" v-model="uservalue" active-text="编辑用户" active-color="#409EFF" inactive-color="#DCDFE6"></el-switch>
                <el-switch class="swit_item" :disabled="!uservalue" v-model="uservalue" active-text="锁定用户" active-color="#409EFF" inactive-color="#DCDFE6"></el-switch>
                <el-switch class="swit_item" :disabled="!uservalue" v-model="uservalue" active-text="删除用户" active-color="#409EFF" inactive-color="#DCDFE6"></el-switch>
            </div>
            <div class="swit_users">
                <el-switch :disabled="!uservalue" v-model="uservalue" active-text="设置用户管理员/测试" active-color="#409EFF" inactive-color="#DCDFE6"></el-switch>
            </div>
        </div>
        <el-form-item style="text-align: right;">
          <el-button @click="editrolepopup=false">取消</el-button>
          <el-button type="primary" @click="submitForm('formInfo')">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
      <el-dialog title="转移成员角色" :visible.sync="transferrolespopup" width="50%">
      <el-form ref="roleformInfo" :model="roleformInfo" class="demo-form-inline" label-width="100px">
        <el-form-item label="转移至" prop="transfer">
          <el-select v-model="roleformInfo.transfer" style="width:98%" placeholder="请选择">
          <el-option label="普通座" value="1"></el-option>
          <el-option label="商务座" value="2"></el-option>
          <el-option label="豪华座" value="3"></el-option>
        </el-select>
        </el-form-item>
           <el-form-item style="text-align: right;">
          <el-button @click="transferrolespopup=false">关闭</el-button>
          <el-button type="primary" @click="rolesubmitForm('roleformInfo')">保存</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog title="邀请成员" :visible.sync="invitepopup" width="50%">
      <el-form ref="inviteformInfo" :model="inviteformInfo" class="demo-form-inline" label-width="100px">
        <el-form-item label="授权门店" prop="shop">
          <el-select v-model="inviteformInfo.shop" style="width:98%" placeholder="请选择">
          <el-option label="普通座" value="1"></el-option>
          <el-option label="商务座" value="2"></el-option>
          <el-option label="豪华座" value="3"></el-option>
        </el-select>
        </el-form-item>
           <el-form-item style="text-align: right;">
          <el-button @click="invitepopup=false">关闭</el-button>
          <el-button type="primary" @click="invitesubmitForm('inviteformInfo')">生成邀请二维码</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog title="邀请二维码" :visible.sync="imgpopup" width="50%" @close="closeDialog">
      <div style="text-align:center">
      <img src="../../assets/404_images/404.png" style="width:565px;height:565px" alt="">
      </div>
    </el-dialog>
    <el-dialog title="更换授权门店" :visible.sync="changestorespopup" width="50%">
      <el-form ref="changestoreformInfo" :model="changestoreformInfo" class="demo-form-inline" label-width="100px">
        <el-form-item label="转移至" prop="transfer">
          <el-select v-model="changestoreformInfo.transfer" style="width:98%" multiple placeholder="请选择">
          <el-option label="普通座" value="1"></el-option>
          <el-option label="商务座" value="2"></el-option>
          <el-option label="豪华座" value="3"></el-option>
        </el-select>
        </el-form-item>
           <el-form-item style="text-align: right;">
          <el-button @click="changestorespopup=false">关闭</el-button>
          <el-button type="primary" @click="changestoresubmitForm('changestoreformInfo')">保存</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formInfo:{
        rolename:"1"
      },
      roleformInfo:{},
      inviteformInfo:{},
      changestoreformInfo:{},
      uservalue:false,
      editrolepopup:false,
      transferrolespopup:false,
      changestorespopup:false,
      invitepopup:false,
      imgpopup:false,
      dialogTitle: "编辑角色",
      tabPosition: "right",
      tableData: [
        {
          avart: "http://src-cdn.z-si.com/main/image/v1.0/logo.png",
          name: "王小虎",
          sex: "男",
          shop: "全部",
          status: "已加入"
        },
        {
          avart: "http://src-cdn.z-si.com/main/image/v1.0/logo.png",
          name: "王小虎",
          sex: "男",
          shop: "全部",
          status: "已加入"
        },
        {
          avart: "http://src-cdn.z-si.com/main/image/v1.0/logo.png",
          name: "王小虎",
          sex: "男",
          shop: "全部",
          status: "已加入"
        },
        {
          avart: "http://src-cdn.z-si.com/main/image/v1.0/logo.png",
          name: "王小虎",
          sex: "男",
          shop: "全部",
          status: "已加入"
        }
      ],
      tableData1: [
        {
          avart: "http://src-cdn.z-si.com/main/image/v1.0/logo.png",
          name: "王小虎",
          sex: "男",
          shop: "全部",
          status: "已加入"
        },
        {
          avart: "http://src-cdn.z-si.com/main/image/v1.0/logo.png",
          name: "王小虎",
          sex: "男",
          shop: "全部",
          status: "已加入"
        },
        {
          avart: "http://src-cdn.z-si.com/main/image/v1.0/logo.png",
          name: "王小虎",
          sex: "男",
          shop: "全部",
          status: "已加入"
        },
        {
          avart: "http://src-cdn.z-si.com/main/image/v1.0/logo.png",
          name: "王小虎",
          sex: "男",
          shop: "全部",
          status: "已加入"
        }
      ],
      tableData2: [
        {
          avart: "http://src-cdn.z-si.com/main/image/v1.0/logo.png",
          name: "王小虎",
          sex: "男",
          shop: "全部",
          status: "已加入"
        },
        {
          avart: "http://src-cdn.z-si.com/main/image/v1.0/logo.png",
          name: "王小虎",
          sex: "男",
          shop: "全部",
          status: "已加入"
        },
        {
          avart: "http://src-cdn.z-si.com/main/image/v1.0/logo.png",
          name: "王小虎",
          sex: "男",
          shop: "全部",
          status: "已加入"
        },
        {
          avart: "http://src-cdn.z-si.com/main/image/v1.0/logo.png",
          name: "王小虎",
          sex: "男",
          shop: "全部",
          status: "已加入"
        }
      ]
    };
  },
  methods:{
    submitForm(){
      this.editrolepopup=false
    },
    rolesubmitForm(){
      this.transferrolespopup = false
    },
    invitesubmitForm(){
      // this.invitepopup = false
      this.imgpopup = true
    },
    changestoresubmitForm(){
      this.changestorespopup = false
    },
    closeDialog(){
      this.imgpopup = false
      this.invitepopup = false
    },
    editrole(){
      this.editrolepopup = true
    },
    invitemembers(){
      this.invitepopup = true
    },
    transferroles(){
      this.transferrolespopup = true
    },
    changestores(){
      this.changestorespopup = true
    }
  }
};
</script>

<style scoped>
.titbox {
  width: 99%;
  height: 60px;
  background: #eeeeee;
  margin-left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.el-table th > .cell {
  padding-left: 20px !important;
}
.el-table td {
  padding-left: 10px;
}
.role-view {
  height: calc(100vh - 80px);
  margin-top: 20px;
}
.infoswitch {
  width: 94%;
  height: auto;
  background: #ffffff;
  box-shadow: 0px 0px 10px 0px rgba(55, 55, 55, 0.17);
  border-radius: 10px;
  margin-left: 50%;
  margin-bottom: 30px;
  transform: translateX(-50%);
  overflow: hidden;
}
.centerswitch{
    margin-left: 34px;
    margin-top: 20px;
    margin-bottom:20px;
}
.swit_user{
    margin-left: 56px;
    display: flex;
    align-items: center;
}
.swit_users{
    margin-left: 76px;
    margin-bottom:20px;
}
.swit_usersd{
    margin-left: 100px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.swit_item{
    margin-bottom:20px;
    margin-right:20px;
    margin-left:20px;
}
</style>

